<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>article_list</title>

		<link rel="stylesheet" type="text/css" href="style/css.css">

	<script src="js/js.js"></script>

	</head>

	<body>
		<div class="top">
			<div class="top-1">
				<ul>
					<li>
						<a href="#">注册</a>
					</li>
					<li>
						<a href="#">登录</a>
					</li>
					<li>
						<a href="#">帮助</a>
					</li>
				</ul>
			</div>
			<div style="clear: both;"></div>
			<!--清除浮动-->
			<img src="images/logo.jpg" />
			<div class="top-2">
				<ul>
					<li>关于我们</li>
					<li>产品展示</li>
					<li>新闻中心</li>
					<li>人才招聘</li>
					<li>客户留言</li>
				</ul>
			</div>
			<div style="clear: both;"></div>
			<!--清除浮动-->
			<div class="top-3">
				<ul>
					<li>CEO致词</li>
					<li>公司历史</li>
					<li>企业文化</li>
					<li>组织结构</li>
					<li>合作伙伴</li>
				</ul>
			</div>
		</div>

		<div style="clear: both;"></div>
		<!--清除浮动-->

		<div class="guanggao">
			<img src="images/Information_ganggao.jpg" />
		</div>
		
		<div style="clear: both;"></div>
		<!--清除浮动-->
		<img src="images/sheng.png" style="float: left;left: 250px;position: absolute;top: 293px;" />
		<div class="zhong">
			<div class="vip">
				<a> INFORMATION</a>
				<p>会员信息</p>
				<hr width="165px" size="5" style="margin: 0 auto; margin-top: 5px;background-color: #ccc;border: none;" />
				<ul>
					<li><img src="images/Information_xinxi.jpg" />
						<a style="color: #214C8F;">公司新闻</a>
					</li>
					<hr width="165px" size="2" style="margin: 0 auto; margin-top: 5px;" />
					<li><img src="images/Information_xinxi.jpg" />
						<a>通知公告</a>
					</li>
					<hr width="165px" size="2" style="margin: 0 auto; margin-top: 5px;" />
					<li><img src="images/Information_xinxi.jpg" />
						<a>科技资讯</a>
					</li>
					
				</ul>
			</div>

			<div class="zilian">
				<div class="z-top">
					<ul class="left">
						<li>&nbsp; 详细资料</li>
					</ul>
					<ul class="r">
						<li>首页&nbsp;></li>
						<li>会员信息&nbsp;></li>
						<li>新闻中心</li>
					</ul>
					<img src="images/Article_list_tu.jpg"/>
				</div>
				<div style="clear: both;"></div>
				
				
				
				
				<div class="hao">
					<ul style="list-style: none;">
						<li style="width: 50px;height: 25px;">编号</li>
						<li style="width: 330px;height: 25px;">标题</li>
						<li style="width: 112px;height: 25px;">作者</li>
						<li style="width: 120px;height: 25px;">日期</li>
						<li style="width: 70px;height: 25px;">点击数</li>
					</ul>
				</div>
				<div class="hao-1" id="hao-1">
					<ul style="list-style: none;" >
						<li style="width: 50px;height: 25px;"class="title">01</li>
						<li style="width: 330px;height: 25px;"class="title">Ahsapeuro一体的综合管理能力 </li>
						<li style="width: 112px;height: 25px;"class="title">web</li>
						<li style="width: 120px;height: 25px;"class="title">2008-07-04</li>
						<li style="width: 70px;height: 25px;"class="title">30</li>
					</ul>
					<ul style="list-style: none;">
						<li style="width: 50px;height: 25px;"class="title9">02</li>
						<li style="width: 330px;height: 25px;"class="title9">与此同时，你可以探测多个。 </li>
						<li style="width: 112px;height: 25px;"class="title9">web</li>
						<li style="width: 120px;height: 25px;"class="title9">2008-07-04</li>
						<li style="width: 70px;height: 25px;"class="title9">30</li>
					</ul>
					<ul style="list-style: none;">
						<li style="width: 50px;height: 25px;"class="title8">03</li>
						<li style="width: 330px;height: 25px;"class="title8">可以应用到许多多站点访问统计的地方。</li>
						<li style="width: 112px;height: 25px;"class="title8">web</li>
						<li style="width: 120px;height: 25px;"class="title8">2008-07-04</li>
						<li style="width: 70px;height: 25px;"class="title8">30</li>
					</ul>
					<ul style="list-style: none;">
						<li style="width: 50px;height: 25px;"class="title7">04</li>
						<li style="width: 330px;height: 25px;"class="title7">照片丝绸线组指定的大小自动的。 </li>
						<li style="width: 112px;height: 25px;"class="title7">web</li>
						<li style="width: 120px;height: 25px;"class="title7">2008-07-04</li>
						<li style="width: 70px;height: 25px;"class="title7">30</li>
					</ul>
					<ul style="list-style: none;">
						<li style="width: 50px;height: 25px;"class="title6">05</li>
						<li style="width: 330px;height: 25px;"class="title6">方便的功能自动论坛。 </li>
						<li style="width: 112px;height: 25px;"class="title6">web</li>
						<li style="width: 120px;height: 25px;"class="title6">2008-07-04</li>
						<li style="width: 70px;height: 25px;"class="title6">30</li>
					</ul>
					<ul style="list-style: none;">
						<li style="width: 50px;height: 25px;"class="title5">06</li>
						<li style="width: 330px;height: 25px;"class="title5">随时随地提供快速和强大的Web邮件。 </li>
						<li style="width: 112px;height: 25px;"class="title5">web</li>
						<li style="width: 120px;height: 25px;"class="title5">2008-07-04</li>
						<li style="width: 70px;height: 25px;"class="title5">30</li>
					</ul>
					<ul style="list-style: none;">
						<li style="width: 50px;height: 25px;"class="title4">07</li>
						<li style="width: 330px;height: 25px;"class="title4">Ahsapeuro一体的综合管理能力 </li>
						<li style="width: 112px;height: 25px;"class="title4">web</li>
						<li style="width: 120px;height: 25px;"class="title4">2008-07-04</li>
						<li style="width: 70px;height: 25px;"class="title4">30</li>
					</ul>
					<ul style="list-style: none;">
						<li style="width: 50px;height: 25px;"class="title3">08</li>
						<li style="width: 330px;height: 25px;"class="title3">与此同时，你可以探测多个。 </li>
						<li style="width: 112px;height: 25px;"class="title3">web</li>
						<li style="width: 120px;height: 25px;"class="title3">2008-07-04</li>
						<li style="width: 70px;height: 25px;"class="title3">30</li>
					</ul>
					<ul style="list-style: none;">
						<li style="width: 50px;height: 25px;"class="title2">09</li>
						<li style="width: 330px;height: 25px;"class="title2">可以应用到许多多站点访问统计的地方。</li>
						<li style="width: 112px;height: 25px;"class="title2">web</li>
						<li style="width: 120px;height: 25px;"class="title2">2008-07-04</li>
						<li style="width: 70px;height: 25px;"class="title2">30</li>
					</ul>
					<ul style="list-style: none;">
						<li style="width: 50px;height: 25px;"class="title1">10</li>
						<li style="width: 330px;height: 25px;"class="title1">照片丝绸线组指定的大小自动的。</li>
						<li style="width: 112px;height: 25px;"class="title1">web</li>
						<li style="width: 120px;height: 25px;"class="title1">2008-07-04</li>
						<li style="width: 70px;height: 25px;"class="title1">30</li>
					</ul>
				</div>
				<div style="clear: both;"></div>
		<!--清除浮动-->
		<script type="text/javascript">
					
						$(".title").mouseover(function(){
						$(".title").css("background-color","red")
						}).mouseout(function(){
							$(".title").css("background-color","#fff")
						});
						
						$(".title1").mouseover(function(){
						$(".title1").css("background-color","red")
						}).mouseout(function(){
							$(".title1").css("background-color","#fff")
						});
						$(".title2").mouseover(function(){
						$(".title2").css("background-color","red")
						}).mouseout(function(){
							$(".title2").css("background-color","#fff")
						});
						$(".title3").mouseover(function(){
						$(".title3").css("background-color","red")
						}).mouseout(function(){
							$(".title3").css("background-color","#fff")
						});
						$(".title4").mouseover(function(){
						$(".title4").css("background-color","red")
						}).mouseout(function(){
							$(".title4").css("background-color","#fff")
						});
						$(".title5").mouseover(function(){
						$(".title5").css("background-color","red")
						}).mouseout(function(){
							$(".title5").css("background-color","#fff")
						});
						$(".title6").mouseover(function(){
						$(".title6").css("background-color","red")
						}).mouseout(function(){
							$(".title6").css("background-color","#fff")
						});
						$(".title7").mouseover(function(){
						$(".title7").css("background-color","red")
						}).mouseout(function(){
							$(".title7").css("background-color","#fff")
						});
						$(".title8").mouseover(function(){
						$(".title8").css("background-color","red")
						}).mouseout(function(){
							$(".title8").css("background-color","#fff")
						});
						$(".title9").mouseover(function(){
						$(".title9").css("background-color","red")
						}).mouseout(function(){
							$(".title9").css("background-color","#fff")
						});
				</script>
				
				<div class="xia">
					<ul>
						<li>上一页</li>
						<li>1</li>
						<li>2</li>
						<li>3</li>
						<li>4</li>
						<li>5</li>
						<li>下一页</li>
					</ul>
				</div>
				<div class="suo">
							<select style="width: 100px;margin-right: 5px;">
									<option>主题</option>
									<option>1</option>
									<option>2</option>
								</select>
							<input type="text" style="width: 130px;margin-right: 5px;" />
							<button>>搜索</button>
				</div>
			</div>
				<div style="clear: both;"></div>
		<!--清除浮动-->
				<style>
					.suo{
						width: 680px;
						height: 30px;
						border-radius: 50px 50px 50px 50px;
						color: #f3f3f3;
						
					}
				</style>
				
				</div>
				<div style="clear: both;"></div>
		<!--清除浮动-->

				
			<div class="wei">
				<p>地址：广东省广州市海珠区新港西路231号3栋4层 联系人：乐 乐 移动电话：13588888888 固定电话：020-1234567 传 真：020-1234567 Copyright @ 2014 文豆网络科技有限公司 版权所有 粤ICP备0000000号</p>
				<select style="float: right;">
					<option>友情链接</option>
					<option>1</option>
					<option>2</option>

				</select>
			</div>

		

	</body>

</html>